﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>管理</title>
    <link href="~/Content/global.css" rel="stylesheet" />
    <link href="~/Content/layui/css/layui.css" rel="stylesheet" />
    <script src="~/Content/layui/lay/dest/layui.all.js"></script>
</head>
<body>
    <h1 class="title-text">@ViewData["title"] DEMO</h1>
    <table class="layui-table" id="tb">
        <colgroup>
            <col width="50">
            <col width="100">
            <col>
            <col width="160">
            <col width="250">
            <col width="100">
            <col width="100">
            <col width="350">
        </colgroup>
        <thead>
            <tr>
                <th></th>
                <th>任务</th>
                <th>任务说明</th>
                <th>调用地址</th>
                <th>间隔</th>
                <th>状态</th>
                <th>循环次数</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item, index) in table_data">
                <td>{{ index + 1 }}</td>
                <td>{{ item.jobKey }}</td>
                <td>{{ item.remark }}</td>
                <td>{{ item.interval }}</td>
                <td>{{ item.interval }}</td>
                <td>{{ item.interval }}</td>
                <td><span v-if="item.repeat > 0">{{ item.repeat }}</span><span v-else>无限</span></td>
                <td>
                    <button class="layui-btn layui-btn-small layui-btn-normal" v-on:click="modify(item.jobKey)">修改</button>
                    <button class="layui-btn layui-btn-small layui-btn-normal" v-on:click="pause(item.jobKey)">暂停</button>
                    <button class="layui-btn layui-btn-small layui-btn-normal" v-on:click="shutdown(item.jobKey)">停止</button>
                    <button class="layui-btn layui-btn-small" v-on:click="resume(item.jobKey)">恢复</button>
                    <button class="layui-btn layui-btn-small layui-btn-danger" v-on:click="remove(item.jobKey)">删除</button>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>
<script src="~/Content/vue.min.js"></script>
<script src="~/Content/moment.js"></script>
<script type="text/javascript">
    var $ = layui.jquery;

    var app = new Vue({
        el: '#tb',
        data: {
            table_data: [{
                "jobKey": "",
                "interval": "",
                "repeat": "",
                "remark" : ""
            }]
        },
        methods: {
            modify: function (jk) {
                layer.open({
                    type: 2,
                    title: '修改',
                    maxmin: true,
                    shadeClose: true, 
                    area: ['650px', '510px'],
                    scrolling: 'no',
                    content: '/index/modify?key=' + jk
                });
            },
            pause: function (jk) {
                alert("pause" + jk);
            },
            shutdown: function (jk) {
                alert("shutdown" + jk);
            },
            resume: function (jk) {
                alert("resume" + jk);
            },
            remove: function (jk) {
                alert("remove" + jk);
            }
        }
    })

    $(function () {
        refreshData();
        setInterval(refreshData, 1000 * 150);
    });

    function refreshData() {
        $.get("/api/GetCurrentJobs", {}, function (rs) {
            app.table_data = rs;
        }, "json");
    }
</script>
